import React, {Component} from 'react'
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions} from 'react-native'

// import {Heading3} from '../../widget/Text'
// import {screen, system} from '../../common'
const {width} = Dimensions.get('window');

type Props = {
    onPress: Function,
    icon: any,
    title: string,
    text: string
}

class GameMenuItem extends Component<Props> {
    render() {
        return (
            <TouchableOpacity style={styles.container}
                              onPress={this.props.onPress}>
                <Image source={this.props.icon} resizeMode='contain' style={styles.icon} />
                <Text>
                    {this.props.title}
                </Text>
                <Text>{this.props.text}</Text>
            </TouchableOpacity>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        width: width / 4.5,
        height:width / 3,
    },
    icon: {
        width:width / 7,
        height:width / 7,
        margin: 5,
    }
});


export default GameMenuItem;